<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全选</title>
    <script src="../js/vue.js"></script>

</head>
<body>
    <div id="main">
        <input type="checkbox" name="all" id="all" @click="selected_all" v-model=all_selected >全选
        <input type="checkbox" name="北京" id="all" value="北京" @click=getselected v-model=item_selected >北京
        <input type="checkbox" name="上海" id="all" value="上海" @click=getselected v-model=item_selected >上海
        <input type="checkbox" name="广州" id="all" value="广州" @click=getselected v-model=item_selected >广州
        <input type="checkbox" name="深圳" id="all" value="深圳" @click=getselected v-model=item_selected >深圳

        <br>

    </div>

    <script>
        let app = new Vue({
            el:"#main",
            data:{
                city:0,
                all_selected:false,
                item_selected:[]
            },
            methods:{
                getselected(e){
                    setTimeout(() => {
                        console.log(this.item_selected.length);
                        if(this.item_selected.length == 4){
                            this.all_selected = true
                        }else{
                            this.all_selected = false
                        }
                    }, 0);
                },
                selected_all(e){
                   this.all_selected = !this.all_selected
                   if(this.item_selected.length == 0){
                        this.item_selected = []
                        this.item_selected.push("北京")
                        this.item_selected.push("上海")
                        this.item_selected.push("广州")
                        this.item_selected.push("深圳")


                   }else{
                        this.item_selected = []
                   }
                  
                }
            }
        })
    </script>
</body>
</html>